<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
	<script type="text/javascript" src="../js/test.js"></script>
	<script type="text/javascript" src="../js/utils.js"></script>
	<style type="text/css">
	div{
		margin: 12px 10px;
		border: solid 2px blue;
	}
	</style>
</head>

<body>
<div>
	<div>
		<div>
			<div>
				<div>
					<div id="pp">冒泡</div>
				</div>
			</div>
		</div>
	</div>
</div>

</body>
<script type="text/javascript">
$(function(){
	// $('div').each(function(){
	// 	$(this).mouseover(function(e){
	// 	$(this).css('border-color', 'red');
	// 	e.stopPropagation();
	// }).mouseout(function(e){
	// 	$(this).css('border-color', 'white');
	// 	e.stopPropagation();
	// });
	// });

	//捕获过程 冒泡过程
	var pp = document.getElementById('pp');
	var tar = pp;
	do{

	tar.addEventListener('click',function(){
		pp.innerHTML += '<br/> ' + this.nodeName;
	},false);//true
	tar = tar.parentNode;
	}while(tar);

});
</script>
</html>